import React,{Component} from 'react';
import axios from 'axios';
import './commingsoon.css';
class CommingSoon extends Component {
	constructor (props){
		super(props);
		this.state = {
			commingsoonArr:[],
			page:1, //已经获取页面的页码
			total:1,
			end:false //是否显示尾部的提示
		}
	}
	componentDidMount(){
		axios.get('/v4/api/film/coming-soon?page=1&count=7')
		.then((resp)=>{
			this.setState({
				commingsoonArr:resp.data.data.films,
				total:resp.data.data.page.total
			})
//			console.log(this.state.commingsoonArr)
		})
		//滚动条滚动到一定位置,触发获取下一页的数据
		this.Scroll();
	}
	//判断滚动事件
	Scroll(){
		let _this = this;
		window.onscroll = function(){
//			console.log(11);
			//滚动后离顶部的距离,如果>100 加载下一页的数据
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			//记录一下需要加载多少页信息
			
			let count = Math.floor(scrollTop/40);
			if(count > 1){
				//
				for (let i = 2;i <= count;i++){
					//
					if(i > _this.state.page){
						//获取数据的函数
//						console.log('获取数据')
						_this.moreData(i);
						
						//修改当前的页码
						_this.setState({
							page:_this.state.page+1
						})
						
						
					}
				}
			}
			
			
		}
	}
	//获取下一页的数据
	moreData(i){
		if(i <= this.state.total){
			axios.get('/v4/api/film/coming-soon?page='+i+'&count=7')
			.then((resp)=>{
	//			console.log(resp)
				let oldArr = this.state.commingsoonArr;
				let newArr = [];
				newArr = oldArr.concat(resp.data.data.films);
				
				
				//将最新的数据保存到commingsoonArr
				this.setState({
					commingsoonArr:newArr
				})
//				console.log(this.state.commingsoonArr);
			})
			if (i === this.state.total){
				this.setState({
					end:true
				})
			}
		}
		
	}
	//时间戳的转换
	formatDate(now) {
		let d = new Date(now);
        let month = d.getMonth() + 1;
        let date = d.getDate();
        return month + "月" + date + "日" ;
    }
    render(){
        return (
        	<div>
	            <ul className='item_ul'>
		            {
		            	this.state.commingsoonArr.map((item,index)=>
		            		<li key = {index}>
		            		
		            		<div className='item_img'>
		            			<img src={item.poster.origin} alt={item.name} />
		            		</div>
		            		<div className='item_name'>
		            			<span>{item.name}
		            			<i className="fa fa-angle-right"></i>
		            			</span>
		            			<p>{item.intro}</p>
		            			<p>{this.formatDate(item.premiereAt)+'上映'}</p>
		            		</div>
		            	
		            		</li>
		            	)
		            }
	            </ul>
	            {
	            	this.state.end?<div className='end'>我是有底线的.......</div>:''
	            }
            </div>
        )
    }
}
export default CommingSoon;